<template>
    <a-table :columns="columns" :data-source="data">
        <template #headerCell="{ column }">
            <template v-if="column.key === 'name'"> </template>
        </template>

        <template #bodyCell="{ column, record }">
            <!-- 样式如：字体颜色 标签颜色 -->
            <template v-if="column.key == 'name'">
                <a>
                    {{ record.name }}
                    <!-- 姓名的字体颜色 -->
                </a>
            </template>

            <template v-if="column.key === 'tags'">
                <a-tag v-for="tag in data.tags">
                    <!-- 昵称的位置 -->
                </a-tag>
            </template>

            <template v-else-if="column.key === 'action'">
                <span>
                    <a-button @Click="by(record)" type="dashed">编辑</a-button>
                    <a-button @Click="sc(record)" type="primary">删除</a-button>
                </span>
            </template>
        </template>
    </a-table>
</template>
<script setup>
const columns = [
    //类型
    {
        title: "序号",
        dataIndex: "age",
        align: "center",
        key: "age",
    },
    {
        title: "用户名",
        dataIndex: "name",
        key: "name",
        align: "center",
    },
    {
        title: "头像(暂不会)",
        dataIndex: "address",
        align: "center",
        key: "address",
    },
    {
        title: "昵称",
        key: "tags",
        align: "center",
        dataIndex: "tags",
    },
    {
        title: "操作",
        align: "center",
        key: "action",
    },
];

const data = ref([
    // 数据
]);

import { get, del, patch } from "../../utils/request";
import { ref } from "vue";
get("/admin/users").then((res) => {
    res.data.list.forEach((element, index) => {
        data.value.push({
            key: element.id,
            name: element.userName, //用户名字
            age: index, //序号
            address: "", //头像暂不管
            tags: "",
        });
        // console.log(element);
    });

    // console.log(res);
    // console.log(res.data.list);
});

const sc = (e) => {
    del("admin/users/" + e.key).then((res) => {
        console.log(res);
        location.reload();
    });
};
const by = (e) => {
    patch("admin/users/" + e.key).then((res) => {
        console.log(res);
        try {
            asdad;
        } catch (error) {
            console.log(error);
        }
    });
};
// post = (url, data) => network.post(url,data);
</script>

<style scoped></style>
